Page({
  /**
   * 页面的初始数据
   */
  data: {
    cameraCtx: undefined,
    listener: undefined,
    // cameraFrame: undefined,
    canvas: undefined,
    canvasCtx: undefined,
    playing: false,
    // model: undefined,
    xRatio: 0,
    yRatio: 0,
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    const appInstance = getApp()
    // console.log(appInstance.globalData)
    const blazeFaceModel = appInstance.globalData.blazeFaceModel
    this.data.cameraCtx = wx.createCameraContext()
    let count = 0;
    this.data.listener = this.data.cameraCtx.onCameraFrame((frame) => {
      // console.log(frame)
      count++
      if (this.playing && count === 3) {
        this.renderPrediction(frame, blazeFaceModel)
        count = 0
      }
    })

    const query = wx.createSelectorQuery()
    query.select('#faceCanvas').fields({ node: true, size: true }).exec((res) => { 
      this.data.canvasWidth = res[0].width
      this.data.canvasHeight = res[0].height
      this.data.canvas = res[0].node
      this.data.canvasCtx = this.data.canvas.getContext('2d')
      const dpr = wx.getSystemInfoSync().pixelRatio
      // console.log(this.data.canvasWidth, this.data.canvasHeight, dpr)
      this.data.canvas.width = this.data.canvasWidth * dpr
      this.data.canvas.height = this.data.canvasHeight * dpr
      this.data.canvasCtx.scale(dpr, dpr)
      // this.data.xRatio = width / 480
      // this.data.yRatio = height / 640
    })
  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    // console.log(this.data)
  },
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
    this.playing = false
    this.data.canvas.cancelAnimationFrame()
    this.data.canvasCtx.clearRect(0, 0, 480, 640)
    this.data.listener.stop()
  },
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },
  switchPlay: function () {
    // console.log(123)
    if (!this.playing) {
      this.playing = true
      // this.setUpPage()
      this.data.listener.start()
    } else {
      this.playing = false
      this.data.canvasCtx.clearRect(0, 0, 480, 640)
      this.data.listener.stop()
    }
  },
  setUpPage: async function () {
    // if (!this.data.model) {
    //   this.data.model = await blazeface.load()
    // }
    // this.renderPrediction()
  },
  renderPrediction: async function(frame, blazeFaceModel) {
    try {
      if (blazeFaceModel) {
        // console.log(frame.width, frame.height)
        const predictions = await blazeFaceModel.estimateFaces(frame.data, { width: frame.width, height: frame.height })
        // console.log(predictions)
        this.data.canvasCtx.clearRect(0, 0, this.data.canvasWidth, this.data.canvasHeight)
        const xRatio = this.data.canvasWidth / frame.width
        const yRatio = this.data.canvasHeight / frame.height
        if (predictions.length > 0) {
          for (let i = 0; i < predictions.length; i++) {
            // bounding box
            const start = predictions[i].topLeft
            const end = predictions[i].bottomRight
            const size = [end[0] - start[0], end[1] - start[1]]
            this.data.canvasCtx.beginPath()
            this.data.canvasCtx.lineWidth = '4'
            this.data.canvasCtx.strokeStyle = 'rgba(255, 0, 0, 0.5)'
            this.data.canvasCtx.rect(start[0] * xRatio - 20, start[1] * yRatio, size[0] * xRatio + 40, size[1] * yRatio)
            this.data.canvasCtx.stroke()
            // landmarks
            // console.log(this.data.canvasCtx)
            const landmarks = predictions[i].landmarks
            this.data.canvasCtx.fillStyle = 'blue'
            for (let j = 0; j < landmarks.length; j++) {
              const x = landmarks[j][0]
              const y = landmarks[j][1]
              this.data.canvasCtx.fillRect(x * xRatio, y * yRatio, 5, 5)
            }
          }
        }
      }
    } catch (error) {
      console.log(error)
    }
  },
})